import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Timeline, Spin } from 'antd';
import axios from 'axios';
import styles from './trailMap.less';
import carIcon from '@/assets/car.png';
import { getQueryString } from '@/utils/common';
import { allDispatchType } from './utils';

const topHeight = 69 + 24;
let marker;
let lineArr = [];
let carSpeed = 0;
const statusList = [
  { title: 'Status', field: 'Arrived' },
  { title: 'Last node', field: 'Arrived' },
  { title: 'ETA', field: '2020-04-24 15:30:00' },
  { title: 'Planned Arrived Time', field: '2020-04-24 17:00:00' },
];
const timeLineList = [
  { time: '2020-04-24 16:47:00', status: 'Signed confirmed' },
  { time: '2020-04-23 17:25:00', status: 'Ship out' },
  { time: '2020-04-23 16:00:00', status: 'Picked up' },
  { time: '2020-04-22 13:02:52', status: 'Ready to ship' },
  { time: '2020-04-21 19:20:36', status: 'Packing completed' },
  { time: '2020-04-21 17:23:13', status: 'Picking completed' },
  { time: '2020-04-21 19:20:36', status: 'Order created' },
];

@connect(({ myOrder, loading }) => ({
  loading: loading.effects[allDispatchType.mapTracks],
}))
export default class TrailMap extends Component {
  state = {
    orderNo: '',
  };

  componentDidMount() {
    const orderNo = getQueryString('orderNo');
    this.setState({
      orderNo,
    });
    this.getMapTracks(orderNo);
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    const orderNo = getQueryString('orderNo');
    if (orderNo && orderNo !== prevState.orderNo && lineArr.length > 0) {
      this.setState({
        orderNo,
      });
      this.startAnimation();
      return orderNo;
    }
  }
  //   componentDidUpdate(prevProps, prevState, snapshot) {
  //     console.log('prevProps', prevProps);
  //     console.log('prevState', prevState);
  //     console.log('snapshot', snapshot);
  //   }
  getMapTracks = orderNo => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.mapTracks,
      payload: { kangNingOrderNo: '27098' },
      callback: res => {
        lineArr = res.mapNodes.tracingPoint;
        carSpeed = res.mapNodes.carSpeed;
        this.setMap(lineArr, carSpeed);
      },
    });
  };

  setMap = lineArr => {
    //测试
    const lineArr3 = [
      ['116.478935', '39.997761'],
      ['116.478939', '39.997825'],
      ['116.478912', '39.998549'],
      ['116.478912', '39.998549'],
      ['116.478998', '39.998555'],
      ['116.478998', '39.998555'],
      ['116.479282', '39.99856'],
      ['116.479658', '39.998528'],
      ['116.480151', '39.998453'],
      ['116.480784', '39.998302'],
      ['116.480784', '39.998302'],
      ['116.481149', '39.998184'],
      ['116.481573', '39.997997'],
      ['116.481863', '39.997846'],
      ['116.482072', '39.997718'],
      ['116.482362', '39.997718'],
      ['116.483633', '39.998935'],
      ['116.48367', '39.998968'],
      ['116.484648', '39.999861'],
    ];

    var map = new AMap.Map('container', {
      resizeEnable: true,
      //   center: [116.397428, 39.90923],
      center: lineArr[0],
      layers: [
        // 卫星
        new AMap.TileLayer.Satellite(),
        // 路网
        new AMap.TileLayer.RoadNet(),
      ],
      zoom: 17,
    });

    marker = new AMap.Marker({
      map: map,
      position: lineArr[0], //[116.478935, 39.997761]
      icon: carIcon,
      offset: new AMap.Pixel(-26, -19),
      autoRotation: true,
      angle: 140,
    });
    // 构造官方卫星、路网图层
    // var satelliteLayer = new AMap.TileLayer.Satellite();

    //批量添加图层
    // map.add([satelliteLayer]);

    // 绘制轨迹
    var polyline = new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: '#28F', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
      map: map,
      // path: lineArr,
      strokeColor: '#AF5', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    });

    marker.on('moving', function(e) {
      passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();

    this.startAnimation();
  };
  startAnimation = () => {
    marker.moveAlong(lineArr, carSpeed);
  };

  pauseAnimation() {
    marker.pauseMove();
  }

  resumeAnimation() {
    marker.resumeMove();
  }

  stopAnimation() {
    marker.stopMove();
  }

  render() {
    const { loading } = this.props;
    return (
      <div id="containerBox" style={{ width: '100%', height: 'calc(100vh - 65px)' }}>
        <div className={styles.leftBox}>
          <div className={styles.c_title}>Real-time tracking of orders - 27376</div>
          <div className={styles.desBox}>
            {statusList.map(v => {
              return (
                <div className={styles.des_item}>
                  <div className={styles.des_title}>{v.title}</div>
                  <div className={styles.des_con}>{v.field}</div>
                </div>
              );
            })}
          </div>
          <Spin spinning={loading}>
            <div id="container" style={{ width: '100%', height: 'calc(100vh - 185px)' }}></div>
          </Spin>
          <div className="input-card">
            <h4>Playback control</h4>
            <div className="input-item">
              <input
                type="button"
                className="btn"
                value="Start"
                id="start"
                onClick={this.startAnimation}
              />
              <input
                type="button"
                className="btn"
                value="Pause"
                id="pause"
                onClick={() => this.pauseAnimation()}
              />
            </div>
          </div>
        </div>
        <div className={styles.rightBox}>
          <div className={styles.c_title}>Nodal time axis</div>
          <div style={{ padding: 15 }}>
            <Timeline>
              {timeLineList.map((v, index) => {
                return (
                  <Timeline.Item>
                    <div className={styles.timelineBox} style={{ color: index == 0 ? 'red' : '' }}>
                      <span className={styles.trail_time}>{v.time}</span>
                      <span className={styles.trail_des}>{v.status}</span>
                    </div>
                  </Timeline.Item>
                );
              })}
            </Timeline>
          </div>
        </div>
      </div>
    );
  }
}
